<template>
  <div class="container">
    <h1>热门商品推荐</h1>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="product-list">
      <div class="product-item" v-for="product in products" :key="product.id">
        <img 
          :src="product.image_url" 
          alt="商品图片"
          class="product-img"
          @error="handleImgError(product)"
        >
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
        <p>价格: ¥{{ product.price }}</p>
        <button @click="addToCart(product)">加入购物车</button><!--我这里写的加入购物车按钮需要写一个跳转到商品页，但我不知道接口是什么，所以就先这样了 -->
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import api from '@/api/history'

export default {
  name: 'HotProductList',
  props: {
    userId: {
      type: Number,
      default: 1 // 默认用户ID为1
    }
  },
  setup(props) {
    const products = ref([])
    const loading = ref(true)
    const error = ref(null)

    const fetchHotProducts = async () => {
      try {
        const response = await api.get(`/api/hot/${props.userId}`)
        products.value = response.data
        products.value.forEach(item => {
          if (!item.image_url) {
            item.image_url = 'http://sz4rr0buo.hn-bkt.clouddn.com/%E8%8A%92%E6%9E%9C%E5%A5%B6%E6%98%94.png'
          }
        })
      } catch (err) {
        error.value = err.response?.data?.detail || '获取热门商品失败'
      } finally {
        loading.value = false
      }
    }
    const handleImgError = (product) => {
      product.image_url = 'http://sz4rr0buo.hn-bkt.clouddn.com/%E8%8A%92%E6%9E%9C%E5%A5%B6%E6%98%94.png'
    }

    onMounted(fetchHotProducts)

    const addToCart = (product) => {
      console.log('添加到购物车:', product)
      alert(`${product.name} 已添加到购物车`)
    }

    return {
      products,
      loading,
      error,
      addToCart,
      handleImgError
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.loading, .error {
  text-align: center;
  font-size: 18px;
  padding: 50px;
}
.loading { color: #999; }
.error { color: #f56c6c; }

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.product-item {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.3s;
}

/* 商品图片样式 */
.product-img {
  width: 100%;
  height: 200px;
  object-fit: cover; 
  border-radius: 4px;
  margin-bottom: 10px;
  background: #f5f5f5; 
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 其他样式保持不变 */
.product-item h3 {
  margin-top: 0;
  margin-bottom: 10px;
}
.product-item p {
  margin: 8px 0;
  color: #666;
}
button {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #3a8ee6;
}
</style>